<template>
  <el-upload
    ref="uploadRef"
    :class="fileList.length >= limit ? 'out_limit_uploader' : ''"
    v-model:file-list="fileList"
    :action="actionUrl + uploadUrl"
    :data="appendData"
    :list-type="listType === 'drag' ? 'text' : listType"
    :multiple="multipleType"
    :limit="limit"
    :headers="headers"
    :accept="acceptType"
    :auto-upload="autoUpload"
    :drag="listType === 'drag'"
    :on-preview="previewHandler"
    :on-remove="removeHandler"
    :on-exceed="exceedHandler"
    :on-success="successHandler"
    class="w-1/1"
  >
   

    <div v-if="listType === 'drag'">
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">拖动文件或 <em>点击</em>上传</div>
    </div>
    <el-button type="primary" v-if="listType === 'text'"
      >{{btnText}}</el-button
    >

    <div class="upload-tips" v-if="listType === 'picture-card'">
      <p>
        <el-icon>
          <Plus />
        </el-icon>
      </p>
    </div>
    <template #tip>
      <p style="line-height: 20px">
        <span class="text_warn" v-text="acceptTypeText" />
      </p>
    </template>
  </el-upload>
</template>
<script lang="ts" setup>
import { ElMessage, UploadFile, UploadInstance } from "element-plus";

import { ref, watch } from "vue";
import { getToken } from "../../utils/storage/token";
const emit = defineEmits(["pushEnd", "pushErrorEnd"]);
const props = defineProps({
  btnText:{
    type:String,
    default:"请选择需要上传的文件",
  },
  // 默认数据
  listData: {
    type: Array,
    default() {
      return [];
    },
  },
  // 上传地址
  uploadUrl: {
    type: String,
    default: "/uploadFile",
  },
  // 附加参数
  appendFilePath: {
    type: String,
    default: "",
  },
  // 是否可拖
  dragFlag: {
    type: Boolean,
    default: false,
  },
  // 多文件上传
  multipleType: {
    type: Boolean,
    default: true,
  },
  // 限制上传条数
  limit: {
    type: Number,
    default: 5,
  },
  listType: {
    type: String,
    default: "picture-card",
  },
  acceptType: {
    type: String,
    default: ".jpg,.png,.jpeg",
  },
  acceptTypeText: {
    type: String,
    default: "请上传.jpg,.png,.jpeg等图片文件",
  },
  autoUpload: {
    type: Boolean,
    default: true,
  },
});
// 监听数据变化
watch(
  () => props.listData,
  (val) => {
    fileList.value = val;
  },
  { deep: true }
);
const headers: any = ref({ jsonType: "jsonType" }),
  appendData = ref({
    type: import.meta.env.VITE_BASE_DIR + props.appendFilePath,
  }),
  fileList: any = ref([]),
  actionUrl = ref(import.meta.env.VITE_BASE_URL),
  previewImg = ref(""),
  previewVisible = ref(false),
  uploadRef = ref<UploadInstance>();
headers.value[import.meta.env.VITE_AUTHOR_KEY] = getToken();
// 清空文件
const clearUploadHandler = () => {
  uploadRef.value!.clearFiles();
};
// 手动提交
const manualUploadHandler = () => {
  if (!fileList.value || fileList.value.length == 0) {
    ElMessage.warning("请选择要上传的文件");
    emit("pushErrorEnd");
    return;
  }
  uploadRef.value!.submit();
};
//   预览
const previewHandler = (file: any) => {
  previewImg.value = file.url;
  previewVisible.value = true;
};
// 移除成功
const removeHandler = (_file: UploadFile,  fileList: any) => {
  fileList.value = fileList;
  emit("pushEnd", fileList);
};
// 上传成功
const successHandler = (_res: any, _file: any, fileList: any) => {
  fileList.value = fileList;
  emit("pushEnd", fileList);
};
// 超出最多张数
const exceedHandler = (_files: File[], _uploadFiles: any) => {
  ElMessage.warning(`最多只能上传${props.limit}个文件`);
};
defineExpose({ manualUploadHandler, clearUploadHandler });
</script>
<style lang="scss">
.upload-tips {
  padding: 0 10px;
  text-align: center;
}
</style>
